<template>
	<view class="home">
		<home-head :loadingning="loadingning" :sysNum="sysNumData"></home-head>
		<!-- 1，消息组件 -->
		<my-search :searchText="searchText" @clickSearch="gotoSearch"></my-search>

		<!-- 2，没有消息展示 -->
		<home-not-msg :topList="topList" :notTopList="notTopList"></home-not-msg>
		<!-- 3，消息列表 -->
		<!-- <scroll-view scroll-y="true" :style="{height:scrollHeight + 'px'}"> -->
		<!-- 3.1，置顶消息 -->
		<view class="list-top" v-for="(item,index) in topList" :key="index">
			<home-chat-item-top :msgData="item" @longpressItem="longpressItem" :windowHeight="windowHeight">
			</home-chat-item-top>
		</view>
		<!-- 3.2，非置顶消息 -->
		<view class="list-not-top" v-for="(item,index) in notTopList" :key="'not' + index">
			<home-chat-item-not-top :msgData="item" @longpressItem="longpressItem">
			</home-chat-item-not-top>
		</view>
		<!-- </scroll-view> -->

		<!-- 4，弹出工具 -->
		<home-open-tool @hidePop="closeShowTool" :popButton="popButton" :showShade="showShade" :showPop="showPop"
			:popStyle="showHeightStyle" @pickerMenu="pickerMenu">
		</home-open-tool>

	</view>
</template>

<script>
	//导入子组件
	import homeTopTool from './home-child/homt-top-tool.vue'
	import homeHead from './home-child/home-head.vue'
	import homeNotMsg from './home-child/home-not-msg.vue'
	import homeChatItemTop from './home-child/home-chat-item-top.vue'
	import homeChatItemNotTop from './home-child/home-chat-item-nottop.vue'
	import homeOpenTool from './home-child/home-open-tool.vue'

	//导入公共组件
	import mySearch from '@/components/common/my-search/my-search.vue'


	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'

	import websocket from '@/utils/msg/websocketUtils.js'

	import {
		msgHomeData,
		msgChatData
	} from '@/object/msg.js'

	import {
		getNotReadMsg,
		updateNotReadMsg
	} from '@/api/http/msg/msg_notloading.js'

	import badgeMix from '@/mixins/tabbar-badge.js'

	export default {
		components: {
			homeHead,
			homeNotMsg,
			homeChatItemTop,
			homeChatItemNotTop,
			homeOpenTool,
			homeTopTool,

			mySearch
		},
		data() {
			return {
				searchText: '搜索好友/群聊',
				scrollHeight: '',
				windowHeight: '',
				//置顶数据
				topList: [],
				//非置顶数据
				notTopList: [],
				//展示
				showShade: false,
				showPop: false,
				showHeightStyle: '',
				popButton: ["标为关注", "置顶聊天", "删除该聊天"],
				//选中用户
				checkData: {},
				//收到系统消息
				sysNumData: 0,
				userId: uni.getStorageSync('userId'),
				isShowTopTool: false,
				isShowTopToolShade: false,
				loadingning: false,
				isVisitorLoginData: false
			}
		},
		computed: {
			...mapState('m_chat', ['topMsgData', 'notTopMsgData', 'notDisturbUserData', 'sysNum']),
			...mapState('m_user_info', ['userInfo', 'isVisitorLogin']),
		},
		mixins: [badgeMix],
		watch: {
			sysNum() {
				this.sysNumData = this.sysNum
			},
			topMsgData() {
				this.getMsgList()
			},
			notTopMsgData() {
				this.getMsgList()
				//console.log(this.notTopList)
			}
		},
		methods: {
			...mapActions('m_chat', ['setMsgList', 'msgReag', 'msgGoTop', 'clearMsgByList', 'addChatData', 'addsysNum',
				'addNotReadMsg'
			]),
			
			//1，获取当前页面高度
			getHomeHight() {
				const res = uni.getSystemInfoSync();
				//屏幕高度
				//console.log(res.screenHeight);
				//可使用高度
				this.windowHeight = res.windowHeight
				//用当前可使用高度减去 头部高度得出当前 消息列表可使用高度
				var height = res.windowHeight - 45 - 1
				this.scrollHeight = height
			},
			//2.1，长按，弹出工具
			longpressItem(item) {
				//console.log(item)
				//计算光标高度
				var height = parseInt(item.cellTop) - 45
				//比较高度大小
				var halfScrollHeight = parseInt(this.scrollHeight) / 2

				if (height > halfScrollHeight) {
					//展示在item上
					//this.isShowTool = '1'
					var showHeight = parseInt(this.windowHeight) - parseInt(item.cellTop) + 20
					this.showHeightStyle = `bottom:${showHeight}px;`
				} else {
					//展示在item下
					//this.isShowTool = '2'
					this.showHeightStyle = `top:${item.cellTop}px;`
				}

				//置顶消息
				if (item.isTop) {
					this.popButton = ["标记已读", "取消置顶", "删除该聊天"]
				} else {
					this.popButton = ["标记已读", "置顶聊天", "删除该聊天"]
				}

				this.checkData = item

				this.showShade = true;
				this.$nextTick(() => {
					setTimeout(() => {
						this.showPop = true;
					}, 10);
				});
			},
			//2.2，关闭弹框
			closeShowTool() {
				this.showPop = false;
				//this.pickerUserIndex = -1;
				setTimeout(() => {
					this.showShade = false;
				}, 10);
			},
			//2.3，选择某一个选项
			pickerMenu(index) {
				//console.log(this.checkData)
				if (index == 0) {
					return this.msgIsRead()
				} else if (index == 1) {
					return this.msgIsGoTop()
				} else {
					return this.msgIsClear()
				}
			},
			//2.4，消息已读
			msgIsRead() {
				if (this.checkData.msgNum == 0) {
					return uni.$showMsg('暂无新的消息！');
				}
				this.msgReag(this.checkData)
			},
			//2.5，消息置顶或非置顶
			msgIsGoTop() {
				//console.log(this.checkData)
				this.msgGoTop(this.checkData)
			},
			//2.6，消息删除
			msgIsClear() {
				this.clearMsgByList(this.checkData)
			},
			//3，获取消息列表
			getMsgList() {
				//console.log(this.notTopMsgData)

				this.topList = this.topMsgData

				this.notTopList = this.notTopMsgData

				this.sysNumData = this.sysNum
			},
			//4，跳转搜索页面
			gotoSearch() {
				this.$isLoginByVisitor()
				if (!uni.getStorageSync('isVisitorLogin')) {
					return
				}

				uni.navigateTo({
					url: '/pages/msg/search-relation/search-relation'
				})
			},
			//5，websocket初始化
			connectSocketInit() {
				if (uni.myWebsocket == undefined || uni.myWebsocket == '' || uni.myWebsocket == null) {
					//连接上websocket
					uni.$connectSocketInit.connectSocket(uni.$nettyPort)
				}
			},
			//查询历史消息
			getNotRead() {
				var that = this
				that.loadingning = true
				getNotReadMsg(this.userId).then(res => {
					if (res.data.pubInfo.code !== 0) {
						that.loadingning = false
						return uni.$showMsg(res.data.pubInfo.message);
					}
					var busInfo = res.data.busInfo
					updateNotReadMsg().then(result => {
						if (result.data.pubInfo.code !== 0) {
							that.loadingning = false
							return uni.$showMsg(result.data.pubInfo.message);
						}
						//console.log('修改了历史状态')
						//console.log(busInfo)
						//添加消息至本地
						that.addNotReadMsg(busInfo)
						that.loadingning = false
					})
				})

			},
			
			//6，关闭右上角弹框
			hideTopTool() {
				this.isShowTopTool = false;
				//this.pickerUserIndex = -1;
				setTimeout(() => {
					this.isShowTopToolShade = false;
				}, 10);
			},
		},
		onLoad() {
			this.isVisitorLoginData = this.isVisitorLogin
			if (this.isVisitorLoginData) {
				console.log('用户模式！')
				this.getHomeHight()
				//this.connectSocketInit()
				this.sysNumData = this.sysNum
			} else {
				console.log('游客模式！')
				//this.visitorLogin()

			}

		},
		onReachBottom() {
			//this.page = this.page + 1
			//this.getAllList()
			//console.log('rqwerwe')
		},
		onShow() {
			this.isVisitorLoginData = this.isVisitorLogin
			if (this.isVisitorLoginData) {
				console.log('用户模式！')
				//获取消息列表
				this.getMsgList()

				//获取历史消息
				this.getNotRead()

				this.connectSocketInit()
			} else {
				console.log('游客模式！')
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: rgb(248, 248, 248);
	}
</style>